// 主题
$xtxColor:#27BA9B;
// 辅助
$helpColor:#E26237;
// 成功
$sucColor:#1DC779;
// 警告
$warnColor:#FFB302;
// 价格
$priceColor:#CF4444;

// $ 就是定义变量 相当于var 

// 鼠标经过上移阴影动画
// 混合器使用@mixin标识符定义
// 然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。
// @include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写：
// 使用直接丢进去就 ok @include hoverShadow 
@mixin hoverShadow {
    transition: all .5s;
    &:hover {
      transform: translate3d(0,-3px,0);
      box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    }
  }